import React, { FC } from 'react'
import useLoadQuestionData from '../../../hooks/useLoadQuestionData'
import style from './Edit.module.scss'
import EditCanvas from './EditCanvas'
import { useDispatch } from 'react-redux'
import { changeSelectedId } from '../../../store/componentsReducer/index'

const Edit: FC = () => {
  const { loading } = useLoadQuestionData()
  const dispatch = useDispatch()
  function clearSelectedId() {
    dispatch(changeSelectedId(''))
  }
  return (
    <div className={style.container}>
      <div style={{ background: '#fff', height: '40px' }}>header</div>
      <div className={style['content-wrapper']}>
        <div className={style.content}>
          <div className={style.left}>left</div>
          <div className={style.main} onClick={clearSelectedId}>
            <div className={style['canvas-wrapper']}>
              <EditCanvas loading={loading} />
            </div>
          </div>
          <div className={style.right}>right</div>
        </div>
      </div>
    </div>
  )
}
export default Edit
